<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>课程名-蜗牛K15-中国在线教育平台第一品牌</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/theme.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/global.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/web.css}">
    <script>
        window.onload=function(){
            let buy=document.getElementById("buy");
            buy.addEventListener("click",function (){
                document.getElementById("orderForm").submit();
            })
        }
    </script>
</head>
<body class="W-body">
<div class="in-wrap">
    <header th:replace="~{commons::#header}"></header>
    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程详情 开始 -->
        <section class="container">
            <section class="path-wrap txtOf hLh30">
                <a href="" title="" class="c-999 fsize14">首页</a>
                \
                <a href="" title="" class="c-999 fsize14">课程列表</a>
                \ <span class="c-333 fsize14">跟老谭学平面几何</span>
            </section>
            <div>
                <article class="c-v-pic-wrap">
                    <video id="videoElement" class="p-h-video-box" controls></video>
                    <section class="p-h-video-box" id="videoPlay">
                        <img th:src="@{/images/course/1.jpg}" alt="跟老谭学平面几何"
                             class="dis c-v-pic"/>
                        <a href="javascript:void(0)" onclick="doPlay('11')" title="跟老谭学平面几何" class="v-play-btn">
                            <em class="icon30">&nbsp;</em>
                        </a>
                    </section>
                    <section class="p-h-video-tip">
                        <img th:src="@{/static/img/v-loading.gif}">
                        <p class="hLh20"><span class="c-999">加载中...</span></p>
                    </section>
                </article>
                <aside class="c-attr-wrap">
                    <section class="ml20 mr15">
                        <h2 class="hLh30 txtOf mt15">
                            <span class="c-fff fsize24" th:text="${course.name}">跟老谭学平面几何</span>
                        </h2>
                        <section class="c-attr-jg">
                            <span class="c-fff">价格：</span><big class="c-yellow">￥0.00</big> <span class="c-ccc ml10">原价：<s>￥123.00</s></span>
                        </section>
                        <section class="c-attr-mt c-attr-time">
                            <span class="c-fff fsize14">课程有效期：从购买之日起80天</span>
                        </section>
                        <section class="c-attr-mt">
                            <a href="javascript:void(0)" title="立即观看"
                               class="comm-btn c-btn-3">立即观看</a>
                            <a href="javascript:void(0)" title="立即购买"
                               class="comm-btn c-btn-3" id="buy">立即购买</a>
                        </section>
                        <section class="c-attr-mt of ml10">
                            <span class="ml10 vam"><em class="icon18 scIcon"></em><a class="c-fff vam" title="收藏"
                        </section>
                        <form th:action="@{/order/add}" method="post" id="orderForm">
                            <input type="text" name="id" th:value="${course.id}">

                        </form>
                    </section>
                </aside>
                <aside class="thr-attr-box">
                    <ol class="thr-attr-ol clearfix">
                        <li><p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">购买数</span><br>
                                <h6 class="c-fff f-fM mt10">120</h6>
                            </aside>
                        </li>
                        <li><p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">课时数</span><br>
                                <h6 class="c-fff f-fM mt10">10</h6>
                            </aside>
                        </li>
                        <li><p>&nbsp;</p>
                            <aside>
                                <span class="c-fff f-fM">浏览数</span><br>
                                <h6 class="c-fff f-fM mt10">256</h6>
                            </aside>
                        </li>
                    </ol>
                </aside>
                <div class="clear"></div>
            </div>
            <!-- /课程封面介绍 -->
            <div class="mt20 c-infor-box">
                <article class="fl col-7">
                    <section class="mr30">
                        <div class="i-box" id="app">
                            <div>
                                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                                    <a name="c-i" class="current" title="课程详情" href="javascript: void(0)">课程详情</a>
                                    <a name="c-g" title="课程大纲" href="javascript: void(0)">课程大纲</a>
                                    <a name="c-c" title="课程评论" href="javascript: void(0)">课程评论</a>
                                </section>
                            </div>
                            <article class="ml10 mr10 pt20">
                                <router-view></router-view>
                            </article>
                        </div>
                    </section>
                </article>
                <aside class="fl col-3">
                    <div class="i-box mt20">
                        <div id="courseLearnedUserDiv">
                            <section class="c-infor-tabTitle c-tab-title">
                                <a title="" href="javascript:void(0)">学过此课的人（0）</a>
                            </section>
                            <section class="no-data-wrap"><em class="icon30 no-data-ico">&nbsp;</em><span
                                    class="c-666 fsize14 ml10 vam">还没有人学过此课程，快去学习吧...</span></section>
                        </div>
                    </div>
                    <div class="i-box mt20">
                        <div>
                            <section class="c-infor-tabTitle c-tab-title">
                                <a title="" href="javascript:void(0)">猜你想学</a>
                            </section>
                            <section class="no-data-wrap">
                                <em class="icon30 no-data-ico">&nbsp;</em> <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在整理中...</span>
                            </section>
                        </div>
                    </div>
                </aside>
                <div class="clear"></div>
            </div>
        </section>
        <!-- /课程详情 结束 -->
    </div>
    <footer th:replace="~{commons::#footer}"/>
</div>
</body>
</html>
